<template>
  <div class="index-admin">
    <el-card class="box-card text-center mb-20">
      <span class="font-s-24 font-bold">栖息地后台数据统计</span>
    </el-card>
    <!--    一  -->
    <el-row>
      <el-col :span="4">
        <el-tooltip placement="top-end" effect="light">
          <div slot="content">统计时间：<span class="color-huang">{{ statInfos.statTime }}</span>
            <br/>用户总数：<span class="color-theme">{{ statInfos.userCount == null ? '--' : statInfos.userCount }}</span>
          </div>
          <el-card class="box-card font-s-18 text-center">
            <p class="color-theme font-s-24 font-bold ">{{
                statInfos.userCount == null ? '--' : statInfos.userCount
              }}</p>
            <div>
              <svg t="1678882513407" class="icon svg-text-center-32-f mr-6" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="8251" width="32" height="32"
              >
                <path
                  d="M703.400215 995.074204c-3.51915 0-7.078209-0.991584-10.240225-3.066849-30.28884-19.875676-80.136132-25.263383-97.079012-25.678846l-22.119787 0-35.287691 0.271176c-0.048095 0-0.095167 0-0.143263 0L92.740194 966.599685c-10.326183 0-18.696828-8.370645-18.696828-18.696828l0-22.467711c-0.318248-6.266727-0.910743-40.603767 21.004383-78.307484 13.716396-23.598464 33.431414-43.86095 58.598606-60.225663 30.493501-19.828604 69.116147-33.909297 114.796536-41.84913 0.233314-0.039909 0.466628-0.075725 0.700965-0.107447 0.346901-0.047072 35.499515-4.858658 71.208808-14.273075 61.894675-16.317641 67.307965-30.743188 67.345828-30.884404 0.364297-1.430582 0.89437-2.803859 1.572822-4.095271 0.50756-2.699482 1.76418-12.858866-0.63752-40.079834-6.100952-69.136613-42.120306-109.995183-71.061452-142.825916-9.127891-10.354835-17.749246-20.133549-24.387433-29.722952-28.640294-41.37227-31.296797-88.416725-31.396057-90.39887-0.01535-0.311085-0.022513-0.62217-0.022513-0.933255 0-18.779715 9.363252-27.418466 17.624403-35.041074l0.433882-0.401136c0.271176-0.25071 0.442068-0.436952 0.542352-0.556679 0.093121-1.340531-0.566912-4.743024-1.013073-7.04137-0.169869-0.873903-0.339738-1.750877-0.50142-2.632967-7.179516-38.981826-7.670703-99.19214-1.175779-137.837298 2.409886-50.813293 46.224788-89.711208 48.105624-91.356684 0.071631-0.062422 0.143263-0.12382 0.214894-0.185218 6.290263-5.338588 12.671601-11.169387 16.727986-17.636682 0.487094-0.775666 0.827855-1.37737 1.066285-1.836835-0.304945-0.786922-0.741897-1.793856-1.094938-2.608407-2.436492-5.618974-6.118348-14.109346-4.02364-25.02393 1.263783-6.589069 6.078439-18.362206 24.118304-23.173792 7.261381-1.937119 15.022135-2.333138 20.689205-2.62171l1.122567-0.058328c22.38994-1.178849 46.272883-2.176572 70.435189-0.324388 174.730557 13.396101 234.920404 78.686107 237.396805 81.459267 0.140193 0.155543 0.276293 0.314155 0.409322 0.474814 13.986549 16.756639 24.347524 37.635155 30.7964 62.055334 2.01489 7.619538 3.309372 14.016225 4.062526 20.072151 6.102998 35.464723 5.084808 71.904657 3.78214 96.269577-0.732687 13.675464-2.257413 28.030403-4.800329 45.175899-0.691755 4.656043 0.068562 5.564739 0.355087 5.906523 0.75827 0.906649 1.686409 1.892093 2.667759 2.934842 3.862981 4.099365 9.152451 9.713222 11.964496 18.721387 1.410116 4.502547 2.069125 9.360182 2.069125 15.267728 0 0.311085-0.008186 0.62217-0.022513 0.933255-0.099261 1.982144-2.755764 49.0266-31.395034 90.397846-6.639211 9.590426-15.259542 19.36914-24.387433 29.722952-28.942169 32.829709-64.960501 73.689303-71.061452 142.827963-2.4017 27.220968-1.14508 37.379329-0.63752 40.079834 0.678452 1.291412 1.208525 2.664689 1.572822 4.094248 0.036839 0.141216 5.471618 14.613836 67.648726 30.964222 35.7052 9.388834 70.557986 14.146185 70.90591 14.193257 0.303922 0.040932 0.606821 0.090051 0.908696 0.145309 46.095851 8.549723 84.956927 22.991644 115.505687 42.923602 25.252127 16.476253 44.930305 36.7019 58.489112 60.114123 21.50171 37.128619 20.626783 70.714552 20.195971 77.443813l0 22.332634c0 10.326183-8.370645 18.696828-18.696828 18.696828L775.884063 966.602755c-10.326183 0-18.696828-8.370645-18.696828-18.696828s8.370645-18.696828 18.696828-18.696828l158.188812 0L934.072875 924.897911c0-0.686638 0.00921-1.106194 0.081864-1.769296 0.104377-1.508353 1.627057-28.332279-16.349363-58.130955-10.82044-17.937534-26.589588-33.609469-46.870494-46.580898-26.100448-16.693194-59.762105-28.967752-100.05274-36.482913-4.63967-0.642636-39.012526-5.564739-75.080999-15.059997-70.761624-18.629289-87.964424-39.353286-93.189426-54.395888-4.004197-7.765871-6.245238-23.195282-2.984984-60.153008 7.18054-81.369216 49.41955-129.282458 80.260975-164.268274 8.747221-9.921977 16.301268-18.491143 21.693068-26.279526 21.120017-30.510898 24.437575-66.300009 24.765033-70.606081-0.032746-2.252297-0.260943-3.223415-0.36225-3.549849-0.248663-0.798179-1.89721-2.547009-3.490497-4.238534-1.25048-1.327228-2.667759-2.832512-4.136204-4.587482-7.950066-9.504468-10.782577-21.079084-8.66024-35.384905 2.367931-15.960507 3.781116-29.206182 4.449335-41.684378 1.951445-36.502355 0.913812-63.747883-3.363607-88.341001-0.057305-0.326435-0.105401-0.654916-0.145309-0.983397-0.531096-4.438079-1.530866-9.354042-3.14769-15.46932-4.986571-18.884093-12.726859-34.770921-23.006993-47.232744-1.714038-1.747807-15.385409-15.125489-45.883003-29.67588-54.882981-26.183336-120.791064-35.849486-166.417217-39.34817-21.934568-1.681292-44.442188-0.732687-65.614393 0.382717l-1.178849 0.060375c-1.766226 0.090051-4.735861 0.2415-7.55814 0.525979 2.447748 5.841032 5.453199 14.632255 2.296299 25.136493-1.184989 3.939729-3.003404 7.792477-5.723352 12.129248-6.732331 10.733459-15.923668 19.23611-24.054859 26.145473-1.597381 1.441838-34.223452 31.356149-35.351136 65.738213-0.028653 0.86981-0.11768 1.736551-0.267083 2.594081-5.972015 34.304294-5.568832 90.780563 0.898463 125.894292 0.140193 0.765433 0.288572 1.52575 0.435928 2.282996 1.980097 10.205433 5.294586 27.284413-10.879792 42.202171l-0.434905 0.402159c-2.086521 1.924839-4.943592 4.560876-5.41636 5.468548l0 0c0.00307 0-0.13303 0.426719-0.164752 1.584078 0.328481 4.295839 3.654226 40.060391 24.76401 70.554916 5.3918 7.788383 12.945847 16.356526 21.693068 26.279526 30.841426 34.984792 73.079412 82.899058 80.259952 164.266227 3.260254 36.95875 1.019213 52.388161-2.984984 60.154032-5.226025 15.042601-22.427802 35.766598-93.189426 54.395888-36.365232 9.574053-71.006194 14.497179-75.18947 15.074324-39.83424 6.958482-73.196069 18.883069-99.160417 35.44528-20.185738 12.876262-35.971259 28.599362-46.919613 46.732347-18.282389 30.281677-17.133216 57.860802-17.055444 59.33641 0.050142 0.543376 0.054235 0.867764 0.054235 1.433652l0 4.309142 427.01135 0 35.287691-0.271176c0.047072 0 0.095167 0 0.143263 0l22.423709 0c0.141216 0 0.280386 0.001023 0.421602 0.005117 2.895957 0.064468 71.446215 1.943258 116.949572 31.803333 8.633634 5.665023 11.039427 17.254989 5.374404 25.888624C715.458855 992.104569 709.488887 995.074204 703.400215 995.074204zM631.466905 689.8762c0.454348 0.36839 0.890276 0.757247 1.305739 1.164522C632.378671 690.653913 631.943766 690.26301 631.466905 689.8762zM414.041968 689.8762c-0.471744 0.382717-0.901533 0.768503-1.292436 1.152243C413.160901 690.626283 413.592736 690.24152 414.041968 689.8762z"
                  fill="#FF9000" p-id="8252"
                ></path>
              </svg>
              <span class="font-bold  cursor-pointer text-underline-hover"
                    @click="$router.push('/system/userMain/main')"
              >用户总数</span>

            </div>
          </el-card>
        </el-tooltip>
        <el-tooltip placement="top-end" effect="light" class="mt-20">
          <div slot="content">统计时间：<span class="color-huang">{{ statInfos.statTime }}</span>
            <br/>用户在线总数：<span class="color-theme">{{
                statInfos.onlineUserCount == null ? '--' : statInfos.onlineUserCount
              }}</span>
          </div>
          <el-card class="box-card font-s-18 text-center">
            <p class="color-theme font-s-24 font-bold ">
              {{ statInfos.onlineUserCount == null ? '--' : statInfos.onlineUserCount }}</p>
            <div>
              <svg t="1678882863782" class="icon svg-text-center-32-f mr-6" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="8579" width="32" height="32"
              >
                <path
                  d="M356.246145 681.56286c-68.156286-41.949414-107.246583-103.84102-107.246583-169.805384 0-65.966411 39.090297-127.860063 107.246583-169.809477 12.046361-7.414877 15.800871-23.190165 8.385994-35.236526-7.413853-12.046361-23.191188-15.801894-35.236526-8.387018-39.640836 24.399713-72.539106 56.044434-95.137801 91.515297-23.86657 37.461193-36.481889 79.620385-36.481889 121.917724 0 42.297338 12.615319 84.454484 36.481889 121.914654 22.598694 35.469839 55.496965 67.11456 95.137801 91.51325 4.185322 2.576685 8.821923 3.804652 13.400195 3.804652 8.598842 0 16.998139-4.329609 21.836331-12.190647C372.047016 704.752002 368.291482 688.976714 356.246145 681.56286zM263.943926 754.580874c-92.603071-61.111846-145.713686-149.623739-145.713686-242.840794 0-93.195565 53.094242-181.682899 145.667637-242.774279 11.805884-7.79043 15.061021-23.677259 7.269567-35.483142-7.79043-11.805884-23.677259-15.062044-35.483142-7.269567C128.487861 296.954249 67.006602 401.024489 67.006602 511.74008c0 110.73708 61.496609 214.830857 168.721703 285.593504 4.343935 2.867304 9.240455 4.238534 14.08274 4.238534 8.317433 0 16.476253-4.046153 21.400403-11.507078C279.003923 778.258133 275.748786 762.372328 263.943926 754.580874zM788.660552 226.213092c-11.80486-7.791453-27.692712-4.536316-35.483142 7.269567-7.79043 11.805884-4.536316 27.692712 7.269567 35.483142 92.575442 61.092403 145.670707 149.579737 145.670707 242.774279 0 93.216032-53.111638 181.727924-145.715733 242.840794-11.805884 7.79043-15.059997 23.678282-7.269567 35.484166 4.925173 7.461949 13.081946 11.507078 21.400403 11.507078 4.841262 0 9.739828-1.37123 14.083763-4.238534 107.22714-70.761624 168.724773-174.857447 168.724773-285.593504C957.341323 401.025513 895.860063 296.955272 788.660552 226.213092zM790.090111 633.67213c23.865547-37.459147 36.480866-79.617315 36.480866-121.914654 0-42.298362-12.615319-84.45653-36.480866-121.917724-22.598694-35.470863-55.496965-67.115584-95.139847-91.515297-12.047384-7.413853-27.821649-3.659343-35.236526 8.387018-7.414877 12.045337-3.659343 27.821649 8.385994 35.236526 68.156286 41.949414 107.247606 103.842043 107.247606 169.809477 0 65.964364-39.090297 127.85597-107.247606 169.804361-12.045337 7.414877-15.800871 23.190165-8.385994 35.237549 4.838192 7.861038 13.236466 12.190647 21.835308 12.190647 4.579295 0 9.215896-1.227967 13.400195-3.804652C734.591099 700.786691 767.490394 669.142993 790.090111 633.67213zM567.129086 518.274914c24.12342-17.150612 39.887452-45.305859 39.887452-77.07133 0-52.128241-42.452881-94.538143-94.634334-94.538143-52.18043 0-94.633311 42.408879-94.633311 94.538143 0 31.695886 15.696494 59.797921 39.730886 76.958766-49.875944 21.128203-84.917018 70.234621-84.917018 127.301338 0 2.366907 0.061398 4.762467 0.182149 7.119141l1.249457 24.296359 276.373515 0 1.238201-24.308639c0.119727-2.358721 0.181125-4.750187 0.181125-7.106862C651.786185 588.497255 616.865861 539.465538 567.129086 518.274914zM512.381182 397.889079c23.937179 0 43.411719 19.430538 43.411719 43.314505 0 23.882943-19.47454 43.313481-43.411719 43.313481-23.936155 0-43.409672-19.430538-43.409672-43.313481C468.971509 417.320641 488.445026 397.889079 512.381182 397.889079zM426.08884 625.656573c9.119705-38.542828 44.254923-67.337641 86.085634-67.337641s76.966952 28.794813 86.085634 67.337641L426.08884 625.656573z"
                  p-id="8580" fill="#1296db"
                ></path>
              </svg>
              <span class="font-bold  cursor-pointer text-underline-hover" @click="$router.push('/monitor/online')">在线用户总数</span>
            </div>
          </el-card>
        </el-tooltip>
        <el-tooltip placement="top-end" effect="light" class="mt-20">
          <div slot="content">名言分类总数：<span class="color-theme">{{
              statInfos.dictumGroupCount == null ? '--' : statInfos.dictumGroupCount
            }}</span>
          </div>
          <el-card class="box-card font-s-18 text-center">
            <p class="color-theme font-s-24 font-bold ">{{
                statInfos.dictumGroupCount == null ? '--' : statInfos.dictumGroupCount
              }}</p>
            <div>
              <svg t="1683609825024" class="icon svg-text-center-32-f mr-6" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="2478" width="32" height="32"
              >
                <path
                  d="M575.68 736a160.32 160.32 0 1 0 160.32-160.32H599.893333c-13.461333 0-24.192 10.752-24.192 24.192V736zM736 533.333333A202.666667 202.666667 0 1 1 533.333333 736V599.893333A66.432 66.432 0 0 1 599.872 533.333333H736zM490.666667 736a202.666667 202.666667 0 1 1-202.666667-202.666667h136.128A66.432 66.432 0 0 1 490.666667 599.872V736z m-202.666667-160.32a160.32 160.32 0 1 0 160.32 160.32V599.893333c0-13.44-10.730667-24.192-24.192-24.192H288zM533.333333 287.978667A202.666667 202.666667 0 1 1 736 490.666667H599.893333A66.432 66.432 0 0 1 533.333333 424.128V288z m202.666667 160.341333a160.32 160.32 0 1 0-160.32-160.32v136.128c0 13.44 10.730667 24.192 24.192 24.192H736zM448.32 288a160.32 160.32 0 1 0-160.32 160.32h136.128c13.461333 0 24.192-10.752 24.192-24.192V288zM288 490.666667A202.666667 202.666667 0 1 1 490.666667 288v136.128A66.432 66.432 0 0 1 424.128 490.666667H288z"
                  fill="#8e44ad" p-id="2479"
                ></path>
              </svg>

              <span class="font-bold  cursor-pointer text-underline-hover" @click="$router.push('/operation/group')">名言分类总数</span>
            </div>
          </el-card>
        </el-tooltip>
        <el-tooltip placement="top-end" effect="light" class="mt-20">
          <div slot="content">名言专辑总数：<span class="color-theme">{{
              statInfos.dictumAlbumCount == null ? '--' : statInfos.dictumAlbumCount
            }}</span>
          </div>
          <el-card class="box-card font-s-18 text-center">
            <p class="color-theme font-s-24 font-bold ">{{
                statInfos.dictumAlbumCount == null ? '--' : statInfos.dictumAlbumCount
              }}</p>
            <div>
              <svg t="1683610008410" class="icon svg-text-center-32-f mr-6" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="3157" width="32" height="32"
              >
                <path
                  d="M516.4544 909.568c-218.9312 0-397.056-178.1248-397.056-397.056s178.1248-397.056 397.056-397.056 397.056 178.1248 397.056 397.056c0.0512 218.9312-178.0736 397.056-397.056 397.056z m0-742.9632c-190.72 0-345.856 155.136-345.856 345.856s155.136 345.856 345.856 345.856 345.856-155.136 345.856-345.856-155.136-345.856-345.856-345.856z"
                  fill="#606D87" p-id="3158"
                ></path>
                <path
                  d="M288.1536 538.0608c-14.1312 0-25.6-11.4688-25.6-25.6 0-139.9808 113.92-253.9008 253.9008-253.9008 14.1312 0 25.6 11.4688 25.6 25.6s-11.4688 25.6-25.6 25.6c-111.7696 0-202.7008 90.9312-202.7008 202.7008 0 14.1312-11.4688 25.6-25.6 25.6zM516.4544 605.9008c-51.5072 0-93.44-41.8816-93.44-93.44 0-51.5072 41.8816-93.3888 93.44-93.3888 51.5072 0 93.3888 41.8816 93.3888 93.3888 0.0512 51.5072-41.8816 93.44-93.3888 93.44z m0-135.6288c-23.296 0-42.24 18.944-42.24 42.1888s18.944 42.24 42.24 42.24 42.1888-18.944 42.1888-42.24-18.8928-42.1888-42.1888-42.1888z"
                  fill="#FFAF50" p-id="3159"
                ></path>
              </svg>

              <span class="font-bold  cursor-pointer text-underline-hover"
                    @click="$router.push('/dicum/album')"
              >名言专辑总数</span>
            </div>
          </el-card>
        </el-tooltip>
        <el-tooltip placement="top-end" effect="light" class="mt-20">
          <div slot="content">名言总数：<span class="color-theme">{{
              statInfos.dictumCount == null ? '--' : statInfos.dictumCount
            }}</span>
          </div>
          <el-card class="box-card font-s-18 text-center">
            <p class="color-theme font-s-24 font-bold ">{{
                statInfos.dictumCount == null ? '--' : statInfos.dictumCount
              }}</p>
            <div>
              <svg t="1683610040603" class="icon svg-text-center-32-f mr-6" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="3762" width="32" height="32"
              >
                <path
                  d="M176.056576 768c-15.36 0-29.184-4.096-40.96-12.8-17.92-13.312-28.672-38.4-31.744-74.24-9.216-98.816 36.864-260.608 142.848-378.88C453.048576 71.68 699.320576-13.824 999.352576 40.448c12.288 2.048 22.016 11.776 24.576 23.552 2.56 12.288-2.56 24.576-12.8 31.744-284.16 190.464-385.024 341.504-474.112 475.136-16.896 25.088-32.256 48.64-49.152 72.192-6.656 9.216-17.408 13.824-28.16 12.8-31.744-3.584-88.576 29.184-107.008 39.424l-1.024 0.512C280.504576 736.256 220.600576 768 176.056576 768z m-3.584-60.416z m-0.512-0.512c2.56 0.512 15.872 2.56 54.784-13.824 30.72-13.312 64.512-32.768 94.208-50.176l1.024-0.512c37.376-21.504 83.968-45.056 125.44-47.616 12.8-18.432 25.6-37.888 38.912-57.856C571.320576 409.6 667.064576 266.24 912.824576 89.6 669.112576 66.048 465.336576 148.992 291.256576 343.04c-134.656 150.016-139.776 339.456-119.296 364.032z"
                  fill="#8e44ad" p-id="3763"
                ></path>
                <path
                  d="M30.648576 980.992c-4.096 0-8.192-1.024-12.288-2.56-15.36-6.656-22.528-24.576-15.872-39.936 155.648-358.4 485.888-620.032 500.224-630.784 13.312-10.24 32.256-8.192 43.008 5.12 10.24 13.312 8.192 32.256-5.12 43.008-3.072 2.56-332.288 263.168-481.792 607.232-5.12 11.264-16.384 17.92-28.16 17.92z"
                  fill="#8e44ad" p-id="3764"
                ></path>
                <path
                  d="M331.192576 537.6h-1.536c-16.896-1.024-29.696-14.848-29.184-31.744l11.776-253.952c1.024-16.896 14.848-29.696 31.744-29.184 16.896 1.024 29.696 14.848 29.184 31.744l-11.776 253.952c-0.512 16.384-13.824 29.184-30.208 29.184zM905.656576 999.424c-3.584 0-7.68-0.512-11.264-2.048-44.032-17.92-68.608-46.592-88.064-69.12-23.04-26.624-35.84-41.984-71.68-40.448-31.232 1.024-50.688 20.992-72.704 44.544-27.648 28.672-61.952 64.512-120.32 51.712-47.616-10.24-71.68-39.936-91.648-63.488-20.992-25.6-35.328-42.496-74.24-42.496h-0.512c-68.096 0.512-142.336 62.464-165.376 86.528-11.776 12.288-30.72 12.8-43.008 1.024-12.288-11.776-12.8-30.72-1.024-43.008 4.096-4.096 101.376-104.448 208.896-104.96h1.024c67.584 0 97.28 35.84 121.344 64.512 17.408 20.992 30.72 37.376 57.856 43.008 23.04 5.12 35.84-5.632 63.488-34.304 26.112-27.136 58.88-61.44 114.688-63.488 65.536-2.56 94.208 31.744 120.32 61.44 17.92 20.48 34.304 39.936 65.024 52.736 15.36 6.144 23.04 24.064 16.896 39.936-6.144 10.752-17.408 17.92-29.696 17.92z"
                  fill="#8e44ad" p-id="3765"
                ></path>
              </svg>
              <span class="font-bold  cursor-pointer text-underline-hover"
                    @click="$router.push('/dicum/info')"
              >名言总数</span>
            </div>
          </el-card>
        </el-tooltip>
      </el-col>
      <el-col :span="1" style="height: 1px"/>
      <el-col :span="14" style="margin-top: 30px">
        <div class="overflow-hidden">
          <p class="font-bold  font-s-18 mb-10">网站数据月度统计图</p>
          <div id="container"></div>
        </div>
      </el-col>
      <el-col :span="1" style="height: 1px"/>
      <el-col :span="4">
        <el-tooltip placement="top-end" effect="light">
          <div slot="content">统计时间：<span class="color-huang">{{ statInfos.statTime }}</span>
            <br/>文章总数：<span class="color-theme">{{
                statInfos.articleCount == null ? '--' : statInfos.articleCount
              }}</span>
          </div>
          <el-card class="box-card font-s-18 text-center">
            <p class="color-theme font-s-24 font-bold ">{{
                statInfos.articleCount == null ? '--' : statInfos.articleCount
              }}</p>
            <div>
              <svg t="1678883495542" class="icon svg-text-center-32-f mr-6" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="15613" width="32" height="32"
              >
                <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="15614"></path>
                <path
                  d="M682.666667 204.8h238.933333a34.133333 34.133333 0 0 1 34.133333 34.133333v648.533334a68.266667 68.266667 0 0 1-68.266666 68.266666h-204.8V204.8z"
                  fill="#FFAA44" p-id="15615"
                ></path>
                <path
                  d="M68.266667 921.6a34.133333 34.133333 0 0 0 34.133333 34.133333h785.066667a68.266667 68.266667 0 0 1-68.266667-68.266666V102.4a34.133333 34.133333 0 0 0-34.133333-34.133333H102.4a34.133333 34.133333 0 0 0-34.133333 34.133333v819.2z"
                  fill="#11AA66" p-id="15616"
                ></path>
                <path
                  d="M238.933333 307.2a34.133333 34.133333 0 0 0 0 68.266667h136.533334a34.133333 34.133333 0 1 0 0-68.266667H238.933333z m0 204.8a34.133333 34.133333 0 1 0 0 68.266667h409.6a34.133333 34.133333 0 1 0 0-68.266667H238.933333z m0 204.8a34.133333 34.133333 0 1 0 0 68.266667h204.8a34.133333 34.133333 0 1 0 0-68.266667H238.933333z"
                  fill="#FFFFFF" p-id="15617"
                ></path>
              </svg>
              <span class="font-bold  cursor-pointer text-underline-hover"
                    @click="$router.push('/article/article-inform')"
              >文章总数</span>
            </div>
          </el-card>
        </el-tooltip>
        <el-tooltip placement="top-end" effect="light" class="mt-20">
          <div slot="content">统计时间：<span class="color-huang">{{ statInfos.statTime }}</span>
            <br/>专栏总数：<span class="color-theme">{{
                statInfos.specialCount == null ? '--' : statInfos.specialCount
              }}</span>
          </div>
          <el-card class="box-card font-s-18 text-center">
            <p class="color-theme font-s-24 font-bold ">{{
                statInfos.specialCount == null ? '--' : statInfos.specialCount
              }}</p>
            <div>
              <svg t="1678883217420" class="icon svg-text-center-32-f mr-6" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="10316" width="32" height="32"
              >
                <path
                  d="M170.666667 85.333333h682.666666c47.1296 0 85.333333 38.203733 85.333334 85.333334v682.666666c0 47.1296-38.203733 85.333333-85.333334 85.333334H170.666667c-47.1296 0-85.333333-38.203733-85.333334-85.333334V170.666667c0-47.1296 38.203733-85.333333 85.333334-85.333334z m0 64a21.333333 21.333333 0 0 0-21.333334 21.333334v682.666666a21.333333 21.333333 0 0 0 21.333334 21.333334h682.666666a21.333333 21.333333 0 0 0 21.333334-21.333334V170.666667a21.333333 21.333333 0 0 0-21.333334-21.333334H170.666667z m490.666666 235.025067l-114.6752 66.210133c-9.890133 7.8592-21.943467 13.457067-34.5472 13.457067-12.637867 0-23.1936-5.597867-32.529066-13.333333-0.631467-0.520533-39.6032-23.611733-116.9152-69.269334v313.706667a32 32 0 1 1-64 0v-362.666667c0-9.4464 4.096-17.9328 10.602666-23.790933a39.68 39.68 0 0 1 48.7168-7.150933l156.5568 90.389333 154.568534-89.2416a39.68 39.68 0 0 1 50.645333 9.3568A28.881067 28.881067 0 0 1 725.333333 337.309867v357.819733a32 32 0 1 1-64 0V384.3584z"
                  fill="#6b0d64" p-id="10317"
                ></path>
              </svg>
              <span class="font-bold  cursor-pointer text-underline-hover"
                    @click="$router.push('/special/information')"
              >专栏总数</span>
            </div>
          </el-card>
        </el-tooltip>
        <el-tooltip placement="top-end" effect="light" class="mt-20">
          <div slot="content">统计时间：<span class="color-huang">{{ statInfos.statTime }}</span>
            <br/>收藏夹总数：<span class="color-theme">{{
                statInfos.favoritesCount == null ? '--' : statInfos.favoritesCount
              }}</span>
          </div>
          <el-card class="box-card font-s-18 text-center">
            <p class="color-theme font-s-24 font-bold ">
              {{ statInfos.favoritesCount == null ? '--' : statInfos.favoritesCount }}</p>
            <div>
              <svg t="1678883310365" class="icon svg-text-center-32-f mr-6" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="11518" width="32" height="32"
              >
                <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="11519"></path>
                <path
                  d="M170.666667 68.266667a136.533333 136.533333 0 0 0-136.533334 136.533333v273.066667c0 50.517333 27.4432 94.651733 68.266667 118.272V273.066667a68.266667 68.266667 0 0 1 68.266667-68.266667h682.666666a68.266667 68.266667 0 0 1 68.266667 68.266667v323.072A136.465067 136.465067 0 0 0 989.866667 477.866667V273.066667a136.533333 136.533333 0 0 0-136.533334-136.533334h-303.172266A61.7472 61.7472 0 0 1 494.933333 102.4c-10.4448-20.923733-31.8464-34.133333-55.227733-34.133333H170.666667z"
                  fill="#FFAA44" p-id="11520"
                ></path>
                <path
                  d="M34.133333 341.333333a68.266667 68.266667 0 0 1 68.266667-68.266666h819.2a68.266667 68.266667 0 0 1 68.266667 68.266666v477.866667a136.533333 136.533333 0 0 1-136.533334 136.533333H170.666667a136.533333 136.533333 0 0 1-136.533334-136.533333V341.333333z"
                  fill="#FF7744" p-id="11521"
                ></path>
                <path
                  d="M496.605867 407.7568a17.066667 17.066667 0 0 1 30.788266 0L576.853333 511.317333a17.066667 17.066667 0 0 0 13.175467 9.557334l113.800533 15.018666a17.066667 17.066667 0 0 1 9.5232 29.2864l-83.2512 79.018667a17.066667 17.066667 0 0 0-5.051733 15.496533l20.923733 112.8448a17.066667 17.066667 0 0 1-24.917333 18.090667l-100.864-54.715733a17.066667 17.066667 0 0 0-16.315733 0l-100.864 54.715733a17.066667 17.066667 0 0 1-24.917334-18.090667l20.8896-112.8448a17.066667 17.066667 0 0 0-5.0176-15.496533l-83.217066-79.018667a17.066667 17.066667 0 0 1 9.489066-29.2864l113.800534-15.018666a17.066667 17.066667 0 0 0 13.175466-9.557334l49.425067-103.560533z"
                  fill="#FFFFFF" p-id="11522"
                ></path>
              </svg>
              <span class="font-bold  cursor-pointer text-underline-hover"
                    @click="$router.push('/collection/information')"
              >收藏夹总数</span>
            </div>
          </el-card>
        </el-tooltip>
        <el-tooltip placement="top-end" effect="light" class="mt-20">
          <div slot="content">标签分类总数：<span class="color-theme">{{
              statInfos.labelGroupCount == null ? '--' : statInfos.labelGroupCount
            }}</span>
          </div>
          <el-card class="box-card font-s-18 text-center">
            <p class="color-theme font-s-24 font-bold ">
              {{ statInfos.labelGroupCount == null ? '--' : statInfos.labelGroupCount }}</p>
            <div>
              <svg t="1678883369780" class="icon svg-text-center-32-f mr-6" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="13442" width="32" height="32"
              >
                <path
                  d="M176 224h672c12.8 0 24-11.2 24-24S860.8 176 848 176H176c-12.8 0-24 11.2-24 24S163.2 224 176 224zM848 384H176c-12.8 0-24 11.2-24 24S163.2 432 176 432h672c12.8 0 24-11.2 24-24S860.8 384 848 384zM416 592H176c-12.8 0-24 11.2-24 24S163.2 640 176 640h240c12.8 0 24-11.2 24-24S428.8 592 416 592zM416 800H176c-12.8 0-24 11.2-24 24S163.2 848 176 848h240c12.8 0 24-11.2 24-24S428.8 800 416 800zM777.6 744c19.2-24 30.4-54.4 30.4-86.4 0-75.2-60.8-137.6-137.6-137.6-75.2 0-137.6 60.8-137.6 137.6 0 75.2 60.8 137.6 137.6 137.6 25.6 0 49.6-6.4 68.8-19.2l67.2 67.2c4.8 4.8 11.2 6.4 17.6 6.4s12.8-1.6 17.6-6.4c9.6-9.6 9.6-24 0-33.6l-64-65.6z m-195.2-86.4c0-49.6 40-89.6 89.6-89.6 49.6 0 89.6 40 89.6 89.6 0 49.6-40 89.6-89.6 89.6-49.6-1.6-89.6-41.6-89.6-89.6z"
                  p-id="13443" fill="#e71c80"
                ></path>
              </svg>
              <span class="font-bold  cursor-pointer text-underline-hover" @click="$router.push('/label/groupingInfo')">标签分类总数</span>
            </div>
          </el-card>
        </el-tooltip>
        <el-tooltip placement="top-end" effect="light" class="mt-20">
          <div slot="content">标签总数：<span class="color-theme">{{
              statInfos.labelCount == null ? '--' : statInfos.labelCount
            }}</span>
          </div>
          <el-card class="box-card font-s-18 text-center">
            <p class="color-theme font-s-24 font-bold ">{{
                statInfos.labelCount == null ? '--' : statInfos.labelCount
              }}</p>
            <div>
              <svg t="1678883431292" class="icon svg-text-center-32-f mr-6" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="14550" width="32" height="32"
              >
                <path
                  d="M867.12685 559.619989l-415.999992-415.999992A52.986666 52.986666 0 0 0 413.413525 127.999998H338.84686c-3.166667-26.559999-9.286666-51.046666-18-71.333332C299.733527 7.333333 271.153528 0 256.000195 0c-13.94 0-40.439999 6.34-61.259999 48.806666-10.473333 21.366666-17.946666 48.966666-21.573333 79.193332H53.333532a53.393332 53.393332 0 0 0-53.333332 53.333332v360.079993a52.986666 52.986666 0 0 0 15.62 37.713332l415.999992 415.999992a53.333332 53.333332 0 0 0 75.426665 0l360.079993-360.079993a53.399999 53.399999 0 0 0 0-75.426665z m-634.073321-491.99999C241.493529 50.373332 250.666862 42.666666 256.000195 42.666666c6 0 16.573333 9.64 25.646666 30.806666 6.493333 15.16 11.333333 33.999999 14.146667 54.526666H216.166862c3.206667-23.42 9.013333-44.359999 16.886667-60.413333z m603.899988 537.286656l-360.079993 360.046659a10.666666 10.666666 0 0 1-15.08 0l-415.999992-415.999991A10.573333 10.573333 0 0 1 42.666866 541.413323V181.33333a10.666666 10.666666 0 0 1 10.666666-10.666667h245.333329c0 47.853332-10.373333 92.159998-27.066666 115.633331-5.926667 8.326667-16.566666 14.186666-22.306667 16.113333C204.040196 314.753327 170.666863 356.219993 170.666863 405.333325c0 58.813332 47.853332 106.666665 106.666665 106.666665s106.666665-47.853332 106.666665-106.666665c0-47.086666-30.666666-87.139998-73.079999-101.246664C330.060194 272.706661 341.333527 223.693329 341.333527 170.666663h72.079998a10.573333 10.573333 0 0 1 7.54 3.126667l415.999992 415.999992a10.666666 10.666666 0 0 1 0 15.08zM277.333528 341.333327a63.999999 63.999999 0 1 1-63.999999 63.999998 64.073332 64.073332 0 0 1 63.999999-63.999998z m319.999994 682.666653a21.333333 21.333333 0 0 1-15.086667-36.419999l382.706659-382.706659a10.666666 10.666666 0 0 0 0-15.08L539.580189 164.419997a21.333333 21.333333 0 0 1 30.173333-30.173333l425.373325 425.373325a53.399999 53.399999 0 0 1 0 75.426665l-382.706659 382.706659A21.266666 21.266666 0 0 1 597.333522 1023.99998z"
                  fill="#f19610" p-id="14551"
                ></path>
              </svg>
              <span class="font-bold  cursor-pointer text-underline-hover"
                    @click="$router.push('/label/info')"
              >标签总数</span>
            </div>
          </el-card>
        </el-tooltip>
      </el-col>
    </el-row>
    <hr class="hr-item mb-20 mt-20"/>
    <!--    二-->
    <el-row :gutter="20">
      <el-col :span="9">
        <el-calendar v-model="statInfos.statTime">
        </el-calendar>
      </el-col>
      <el-col :span="1" class="height-1"/>
      <el-col :span="14">
        <div class="mb-20 mt-20">
          <p class="font-bold  font-s-18 mb-10">标签分类统计图</p>
          <div id="labelGroupContainer"></div>
        </div>
      </el-col>
    </el-row>
    <!-- 三-->
    <hr class="hr-item mb-20 mt-20"/>
    <div class="mb-20 mt-20">
      <p class="font-bold  font-s-18 mb-10">标签统计图</p>
      <div id="labelContainer"></div>
    </div>
  </div>
</template>

<script>
import { labelDate, statInfo, statTheInfo } from '@/api/business/statInfo'
import { Bar, Column } from '@antv/g2plot'

export default {
  name: 'Index',
  data() {
    return {
      statInfos: {},
      statTheInfoArr: [],
      data: [{
        name: '分株21',
        data: 23
      },
        {
          name: '分株2134',
          data: 27
        },
        {
          name: '分株21221',
          data: 63
        }
      ]
    }
  },
  methods: {
    labelDataPicture() {
      labelDate().then(res => {
        let data = res.data.labelGroup
        if (data != null) {
          const bar = new Bar('labelGroupContainer', {
            data,
            xField: 'data',
            yField: 'name',
            seriesField: 'name',
            legend: {
              position: 'top-left'
            },
            conversionTag: {},
            meta: {
              data: {
                alias: '文章数'
              }
            }
          })
          bar.render()
        }
        let labelData = res.data.label
        if (labelData != null) {
          this.labelPicture(labelData)
        }
      })
    },
    labelPicture(data) {
      const plot = new Column('labelContainer', {
        data,
        isGroup: true,
        xField: 'name',
        yField: 'data',
        seriesField: 'twoName',
        interactions: [{ type: 'element-selected' }]
      })
      plot.render()
    },
    statTheInfos() {
      statTheInfo().then(res => {
        this.statTheInfoArr = res.data
        let data = this.statTheInfoArr
        const plot = new Column('container', {
          data,
          isGroup: true,
          xField: 'time',
          yField: 'data',
          seriesField: 'name',
          interactions: [{ type: 'element-selected' }]
        })
        plot.render()
// 如果业务中还有单选联动，可以考虑使用按住某个键来区分交互 (或者多选之后，让用户自己去触发查询)
        document.addEventListener('keyup', (evt) => {
          if (evt.key === 'Shift') {
            const states = plot.getStates()
            // 获取选中元素
            // states.filter(d => d.state === 'selected')
          }
        })

      })
    }
    ,
    statInfoFunction() {
      statInfo().then(res => {
        this.statInfos = res.data
      })
    }
    ,
    goTarget(href) {
      window.open(href, '_blank')
    }

  },
  mounted() {
    this.statInfoFunction()
    this.statTheInfos()
    this.labelDataPicture()
  }


}

</script>

<style>
.el-calendar-table .el-calendar-day {
  height: 46px !important;
}

.index-admin {
  padding: 0 20px 40px 20px;
  height: 100vh;
  overflow: auto;
}

.index-admin::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background-color: #ced6e0;
}

.index-admin::-webkit-scrollbar-track {
  background: #fefefe;
  border-radius: 2px;
}

.index-admin::-webkit-scrollbar-thumb {
  background: #ced6e0;
  border-radius: 2px;
}
</style>

